<template>
  <div class="root">
    <el-table
      ref="multipleTable"
      :data="tableData"
      size="medium"
      style="width: 100%"
      tooltip-effect="light"
       :header-cell-style="{background:'#FAFAFA'}"

    >
      <el-table-column type="selection" min-width="100"></el-table-column>
       <el-table-column type="index" width="100" label="序号"
        ><template slot-scope="scope">
          {{ scope.$index + (currentPage - 1) * 10 + 1 }}
        </template></el-table-column
      >

      <div v-for="(item, index) in table">
        <!-- 排序以及精确到分钟 -->
        <el-table-column
          :label="item.label"
          min-width="160"
          style="height: 100%"
          show-overflow-tooltip
          v-if="item.sortable == true && item.ui_style == 'date_time'"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
          sortable
          :formatter="timeTransToMinute"
        >
        </el-table-column><el-table-column
          :label="item.label"
          min-width="160"
          style="height: 100%"
          show-overflow-tooltip
          v-else-if="item.sortable == true && item.ui_style == 'pure'"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
          sortable
      
        >
        </el-table-column>
        <!-- 图片 -->
        <el-table-column
          :label="item.label"
          min-width="160"
          style="height: 100%"
          show-overflow-tooltip
          v-else-if="item.ui_style == 'img'"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
        >
          <template slot-scope="scope">
            <img
              src=""
            />
          </template>
        </el-table-column>

        <!-- 链接 -->
        <el-table-column
          v-else-if="item.ui_style == 'link'"
          :label="item.label"
          min-width="160"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <a :href="item.link">
              {{ item.link }}
            </a>
          </template>
        </el-table-column>

        <!-- 精确到天 -->
        <el-table-column
           v-else-if="item.ui_style == 'date_day'"
          :label="item.label"
          min-width="160"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
          show-overflow-tooltip
          :formatter="timeTransToDay"
        >
        </el-table-column>

        <!-- 其他 -->
        <el-table-column
           v-else-if="(item.ui_style=='pure'&&item.sortable!='true'||item.ui_style=='tooltip'&&item.sortable!='true')"
          :label="item.label"
          min-width="160"
          :prop="item.key"
          :fixed="item.fixed == '' ? false : item.fixed"
          show-overflow-tooltip
        >
        </el-table-column>
      </div>

      <!-- 最后一列 -->
      <el-table-column
        :label="lastColumn.label"
        :fixed="lastColumn.fixed"
        min-width="160"
      >
        <template slot-scope="scope">
          <el-button
            v-for="item in lastColumn.actions"
            @click.stop="planDetail(scope.row)"
            :key="item.value"
            type="text"
            size="small"
            >{{ item.label }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 左下角的删除区域 -->
    <div class="toolLeftCorner">
      <el-button class="delBtn">删除</el-button>
    </div>
    <!-- 右下角的功能区域 -->
    <div class="toolRightCorner">
      <el-button style="border: none; background: none; color: #3e96fa"
        >上一页</el-button
      >
      <span>{{ currentPage }}/{{ pageSum }}页</span>
      <el-button style="border: none; background: none; color: #3e96fa"
        >下一页</el-button
      >

      <span>跳转</span>
      <el-input
        maxlength="10"
        type="number"
        class="gotoPageDiv"
        v-model="inputPage"
      >
      </el-input>
      页
      <el-button size="medium" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { getTable, getTableData } from "../api/testApi";
export default {
  props: ["actionData"],
  data() {
    return {
      currentPage: 1,
      pageSum: 1, //总页数
      inputPage: "",
      //          tableData: [{
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-08',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-06',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-07',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }],
      multipleSelection: [],
      table: [], //用来画图
      tableData: [], //用来填充数据
      lastColumn: [],
    };
  },
  methods: {
    test() {
      getTable(this.actionData.path, this.actionData.postData).then(
        (response) => {
          this.table = response.data.data.items;
          this.lastColumn = response.data.data.item_actions;
          console.log(this.table);
        }
      );
    },

    getData() {
      getTableData(
        "momeapi/minicrmapp/test/table/data/",
        this.actionData.postData
      ).then((response) => {
        this.tableData = response.data.data.items;
      });
    },

    timeTransToMinute(row, column) {
      console.log(row);
      return this.$moment(row.visitTime).format("YYYY-MM-DD HH:mm");
    },
    timeTransToDay(row, column) {
      console.log(row);
      return this.$moment(row.visitTime).format("YYYY-MM-DD ");
    },
  },

  mounted() {
    this.test();
    this.getData();
  },
};
</script>

<style scoped>
.root {
  border: 1px solid #ddd;
  border-bottom: 0px;
  min-width: 960px;
}
.toolLeftCorner {
  float: left;
  padding-top: 10px;
  margin-left: 0px;
}
.toolRightCorner {
  float: right;
  margin-right: 30px;
  padding-top: 10px;
}
.gotoPageDiv {
  width: 100px;
  height: 10px !important;
  line-height: 20px;
  text-align: center;
}

.delBtn {
  margin-right: 5px;
  color: #ef3934;
  border: 1px solid #ef3934;
  border-radius: 3px;
  background: #fff;
}
</style>